<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      background="#4e6ef2"
      class="searchbar"
      @input="changevalue"
    />
    <div class="history" v-if="thinklist.length === 0">
      <van-cell class="title">
        <template #title>
          <h3>历史搜索</h3>
        </template>
        <template>
          <i class="iconfont icon-lajitong" @click="clearall"></i>
        </template>
      </van-cell>
      <div
        class="tagbox"
        v-for="(item, index) in historyList"
        :key="index"
        ref="singleTag"
      >
        <span @click="searchTag(item, index)" class="tag">{{ item }} </span>
        <van-icon
          size="10px"
          name="cross"
          class="icon"
          @click="closetag(index)"
        />
      </div>
    </div>
    <div class="thinkbox">
      <van-cell
        class="think"
        v-for="(item, index) in thinklist"
        :key="index"
        @click="searchTag(oldThinklist[index], index)"
      >
        <template #icon>
          <i class="iconfont icon-search"></i>
        </template>
        <div class="thinkvalue" v-html="item"></div>
      </van-cell>
    </div>
  </div>
</template>
<script>
import { searchHistory, clearAll, thinklist } from '../../api/search'
import { setlocal, getlocal, removelocal } from '../../utils/local'
export default {
  data () {
    return {
      value: '',
      historyList: JSON.parse(getlocal('keywords')) || '',
      thinklist: '',
      oldThinklist: '',
      timeID: ''
    }
  },
  created () {
    this.setlocal2()
    // console.log('1', this.historyList)
  },
  methods: {
    //   定义获取历史搜索的函数
    async setlocal2 () {
      if (this.historyList === '') {
        const res = await searchHistory()
        console.log(res)
        this.historyList = res.data.data.keywords
        setlocal('keywords', JSON.stringify(res.data.data.keywords))
      }
      // console.log(this.historyList)
    },
    // 搜索事件
    onSearch () {
      // console.log(this.value)
      if (this.value.trim() !== '' && this.historyList) {
        this.historyList.unshift(this.value)
        this.historyList = [...new Set(this.historyList)]
      }
      setlocal('keywords', JSON.stringify(this.historyList))
      this.$router.push({
        path: `/home/searchlist/${this.value}`,
        query: {
          formPath: this.$route.fullPath
        }
      })
    },
    // 搜索栏点击取消
    onCancel () {
      this.thinklist = ''
      this.$router.push('/home/index')
    },
    // 点击搜索历史,联想数据进行跳转搜索详情
    searchTag (item, index) {
      console.log(item)
      this.value = item
      const res = this.historyList.indexOf(item)
      // console.log(res)
      // const res2 = this.thinklist.indexOf(item)
      if (res !== -1) {
        this.historyList.splice(index, 1)
      }
      // console.log(this.historyList)
      this.historyList.unshift(item)
      setlocal('keywords', JSON.stringify(this.historyList))
      this.$router.push({
        path: `/home/searchlist/${this.value}`,
        query: {
          formPath: this.$route.fullPath
        }
      })
    },

    // 点击tag的icon删除单个历史记录
    closetag (index) {
      //   console.log('hahah')
      this.historyList.splice(index, 1)
      setlocal('keywords', JSON.stringify(this.historyList))
      // console.log('2', this.historyList)
    },
    // 输入input事件 触发联想数据
    changevalue (vlue) {
      clearTimeout(this.timeID)
      if (vlue.trim() === '') {
        this.thinklist = ''
        return
      }
      this.timeID = setTimeout(async () => {
        const res = await thinklist({
          q: vlue
        })
        this.oldThinklist = res.data.data.options
        console.log(res)
        const res2 = res.data.data.options.map(item => {
          return item.replace(vlue, `<span style=color:red>${vlue}</span>`)
        })
        //   console.log(res2)
        this.thinklist = res2
      }, 500)
    },
    // 点击联想数据跳转
    // gosearch (index) {
    //   // console.log(this.oldThinklist[index])
    //   this.value = this.oldThinklist[index]
    //   this.$router.push(`/home/searchlist/${this.value}`)
    // },
    // 点击垃圾桶全部删除
    async clearall () {
      //   console.log('lajitong')
      const res = await clearAll()
      console.log(res)
      this.historyList = ''
      removelocal('keywords')
      this.$toast.success({
        message: '删除成功'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  box-sizing: border-box;
  position: relative;
  .searchbar {
    // color: #fff;

    ::v-deep .van-search__action {
      color: #fff;
    }
    ::v-deep .van-search__content {
      border-radius: 20px;
    }
  }
  .history {
    padding: @p12;
    .title {
      padding: 0;
      margin-bottom: 10px;
    }
    .tagbox {
      position: relative;
      display: inline-block;
      width: 60px;
      background: rgb(187, 184, 184);
      height: 30px;
      padding: 0 8px;
      line-height: 30px;
      margin-right: 10px;
      border-radius: 10px;
    }
    .tag {
      display: inline-block;
      text-align: left;
      // background: rgb(187, 184, 184);
      font-size: 12px;
      width: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9999;
    }
    .active {
      display: none;
    }
  }
  .popup {
    background: #dddd;
  }
  .thinkbox {
    position: absolute;
    top: 60px;
    // background: rgba(233, 176, 176, 0.8);
    width: 100%;
    .thinkvalue {
      margin-left: 10px;
    }
  }
}
</style>
